<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <script>
// ------------------------------------------------------------------------------------------
// Sets header of the last grid DetailDetail
Grids.OnShowDetailFinish = function(G,D,row){
if(D.id=="DetailDetail") D.SetValue(D.Header,"V",G.Rows.Sum.V+"'s "+row.N+" - raw value",1);
}   
// ------------------------------------------------------------------------------------------
   
   </script>
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>5. Master detail more tables</h1>
   <h2>Master detail relation among more plain tables</h2>

   <center class="Border" id="Border">
      <div style="width:660px;">
         <div style="float:left; margin-right:20px;">
            <div class="Xml">Source: <a href='05-Master1.js'>05-Master1.js</a></div>
            <div class="Main" style='width:380px; height:270px;'>
               <bdo Debug='check' Data_Url='05-Master1.js'></bdo>
            </div>
            <br />
            <div class="Xml">Source: <a href='05-Master1.js'>05-Master2.js</a></div>
            <div class="Main" style='width:380px; height:320px;'>
               <bdo Debug='check' Data_Url='05-Master2.js'></bdo>
            </div>
         </div>
         <div style="float:left;">
            <div class="Xml">Source: <a href='05-DetailDef.js'>05-DetailDef.js</a> &nbsp; <a href='05-Detail1.js'>05-Detail1.js</a></div>
            <div class="Main" style='width:260px; height:240px;'>
               <bdo Debug='check' Layout_Url='05-DetailDef.js' Data_Url='05-Detail1.js'></bdo>
            </div>
            <br />
            <div class="Xml">Source: <a href='05-DetailDef.js'>05-DetailDef.js</a> &nbsp; <a href='05-Detail2.js'>05-Detail2.js</a></div>
            <div class="Main" style='width:260px; height:230px;'>
               <bdo Debug='check' Layout_Url='05-DetailDef.js' Data_Url='05-Detail2.js'></bdo>
            </div>
            <br />
            <div class="Xml">Source: <a href='05-DetailDetail.js'>05-DetailDetail.js</a></div>
            <div class="Main" style='width:260px; height:80px;'>
               <bdo Debug='check' Data_Url='05-DetailDetail.js' Data_Static='DetailDetail'></bdo>
            </div>
         </div>
      </div>
   </center>

   <ul>
      <li>
         One master grid can show its rows in more different detail grids, even every row in different detail grid.<br />
         One master row can be show in more detail grids at once.<br />
         In one detail grid can be shown data from more master grids, but not at once.<br />
         Even detail grid can work also as master grid and show its rows in another detail grid.<br />
      </li>
      <li>
         This example shows two master grids 1 and 2. Every master grid shows every its row in next two detail grids 1 and 2. 
         And the detail grids 1 and 2 show their rows in the last detail grid.
      </li>
      <li>
         The data are always in the main master grids. The detail grids that works also as master grids do not contain any data, all their data are still copied from their masters.<br />
      </li>
      <li>
         The master row attribute <h3>Detail</h3> can contain more detail grids ids to be copies to all these grids.<br />
      </li>
      <li>
         To choose which master rows children will be copied to which detail grid define Cfg attribute <h3>MasterDef</h3> in detail grid, with list of row default names. 
         Only row with Def attribute listed in MasterDef will be copied to given grid.<br />
         It is even possible to copy one child row to more detail grids, the changes in such row will be mirrored among all the grids.<br />
         If the detail grid works also as master grid for another detail, the defaults for the second detail must be listed in the MasterDef too (in this example the 'DETAIL' def).<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialMaster\s*=\s*(\d+)/), TGIndex = 16;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridMaster5", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialMaster="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>